<template>
  <div class="page-table-box">
    <div class="table-pagination-box">
      <div class="table-box" flex-1 w-full>
        <slot name="table"></slot>
      </div>
      <div class="pagination-box">
        <el-pagination
          v-model:current-page="pageInfo.currentPage"
          v-model:page-size="pageInfo.pageSize"
          :page-sizes="pageInfo.pageSizeCount"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";

const pageInfo = reactive({
  currentPage: 1,
  pageSize: 10,
  total: 20,
  pageSizeCount: [10, 20, 30, 40]
});

const handleSizeChange = (val: number) => {
  pageInfo.pageSize = val;
};
const handleCurrentChange = (val: number) => {
  pageInfo.currentPage = val;
};
</script>

<style scoped lang="scss">
.page-table-box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  position: relative;
}
.pagination-box {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.table-box {
  overflow: hidden;
}
.table-pagination-box {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
}
</style>
